<script setup lang="ts">
defineOptions({
  name: 'tab-page'
})

import { ref, onMounted } from 'vue'

const tabBarList = ref([
  {
    text: '首页',
    icon: {
      active: 'home-index-active',
      inactive: 'home-index-default'
    },
    name: '/home'
  },
  {
    text: '健康百科',
    icon: {
      active: 'home-article-active',
      inactive: 'home-article-default'
    },
    name: '/article'
  },
  {
    text: '消息中心',
    icon: {
      active: 'home-notice-active',
      inactive: 'home-notice-default'
    },
    name: '/notice'
  },
  {
    text: '我的',
    icon: {
      active: 'home-mine-active',
      inactive: 'home-mine-default'
    },
    name: '/user'
  }
])

const active = ref('/home')

import { useRoute } from 'vue-router'

onMounted(() => {
  active.value = useRoute().path
})
</script>

<template>
  <div>
    <div class="page-view">
      <router-view></router-view>
    </div>
    <!-- tabBar 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item
        v-for="item in tabBarList"
        :key="item.name"
        :to="item.name"
        :name="item.name"
      >
        <span>{{ item.text }}</span>
        <template #icon="props">
          <doc-icon :name="props.active ? item.icon.active : item.icon.inactive"></doc-icon>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
